<template>
  <div class="my-input">
    <a-input ref="myInput" v-model="val" @change="handleChage">
      <template v-for="(value, name) in $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData || {}"></slot>
      </template>
    </a-input>
    <div class="my-input-count">
      <!-- {{ $attrs.value && $attrs.value.length ? $attrs.value.length : 0 }}/{{max}} -->
      {{ value ? value.length : 0 }}
    </div>
  </div>
</template>
  <script>
export default {
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: String,
      default: '',
    },
    max: {
      type: Number,
      default: 20,
    },
  },
  watch: {
    value(newVal) {
      this.val = newVal
    },
  },
  data() {
    return {
      val: '',
    }
  },
  methods: {
    handleChage(e) {
      console.log(e.target.value)

      this.$emit('change', e.target.value)
    },
  },
}
</script>
  <style lang="less" scoped>
.my-input {
  position: relative;
  display: flex;
  /deep/.ant-input {
    padding-right: 45px;
  }
}
.my-input-count {
  position: absolute;
  right: 8px;
  top: -4px;
  color: #909399;
  font-size: 12px;
  transition: color 0.3s;
}
</style>
  